<template>
  <view class="lights">
    <image
      class="one-light"
      :src="$IMG_URL + '/uploads/20230520/d4b0217dd386e63ac415ded77944e04c.png'"
    />
    <image
      class="two-light"
      :src="$IMG_URL + '/uploads/20230520/4f1689246b539ca2c50950f7e64e83f8.png'"
    />
    <image
      class="three-light"
      :src="$IMG_URL + '/uploads/20230520/d4b0217dd386e63ac415ded77944e04c.png'"
    />
    <image
      class="four-light"
      :src="$IMG_URL + '/uploads/20230520/4f1689246b539ca2c50950f7e64e83f8.png'"
    />
    <image
      class="five-light"
      :src="$IMG_URL + '/uploads/20230520/d4b0217dd386e63ac415ded77944e04c.png'"
    />
    <image
      class="six-light"
      :src="$IMG_URL + '/uploads/20230520/4f1689246b539ca2c50950f7e64e83f8.png'"
    />
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {};
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.lights {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 4;
  overflow: hidden;
  view,
  image {
    max-width: none;
  }
}

.one-light {
  left: calc(50% - 870px);
  filter: brightness(1.2) hue-rotate(-30deg);
  transform: rotate(60deg);
  opacity: 0.6;
  animation: light-ro-1 3s linear 0s infinite alternate none;
}
.two-light {
  left: calc(50% - 990px);
  transform: rotate(-60deg);
  opacity: 0.4;
  animation: light-ro-2 3s linear 0s infinite alternate none;
}
.three-light {
  right: calc(50% - 506px);
  filter: hue-rotate(0deg);
  transform: rotate(60deg);
  opacity: 0.8;
  animation: light-ro-1 3s linear 0s infinite alternate-reverse none;
}
.four-light {
  right: calc(50% - 680px);
  filter: hue-rotate(340deg);
  transform: rotate(-60deg);
  opacity: 0.4;
  animation: light-ro-2 3s linear 0s infinite alternate-reverse none;
}
.five-light {
  right: calc(50% - 790px);
  filter: hue-rotate(383deg);
  transform: rotate(60deg);
  opacity: 0.8;
  animation: light-ro-1 3s linear 0s infinite alternate-reverse none;
}
.six-light {
  right: calc(50% - 900px);
  filter: hue-rotate(256deg);
  transform: rotate(-60deg);
  opacity: 0.4;
  animation: light-ro-2 3s linear 0s infinite alternate-reverse none;
}
.one-light,
.two-light,
.three-light,
.four-light,
.five-light,
.six-light {
  position: absolute;
  bottom: -250rpx;
  width: 1218px;
  height: 1500px;
  transform-origin: 50% 98%;
}

@keyframes light-ro-1 {
  0% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(-60deg);
  }
}
@keyframes light-ro-2 {
  0% {
    transform: rotate(-60deg);
  }
  100% {
    transform: rotate(60deg);
  }
}
</style>
